<template>
    <h2>{{person}}</h2>
    <h1>{{ name }}</h1>
    <h1>{{ msg }}</h1>
    <h1>{{ job.job1.salary }}</h1>
    <button @click="sum++">点我加一</button>
    <button @click="job.job1.salary++">点我加薪资</button>
    <button @click="msg += '!'">点我加msg</button>
    <button @click="name += '-'">点我加name</button>
</template>

<script>
import { reactive, ref, toRefs, watch } from "vue";
export default {
    setup(props, context) {
        let person = reactive({
            name: "张三",
            msg: "前端",
            job: {
                job1: {
                    salary: 20,
                },
            },
        });

        return { person,...toRefs(person) };
    },
};
</script>                    
<style scoped>
</style>